<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-container>
      <!-- 品达物流侧边栏 -->

      <div class="sidebar-container">
        <!-- 侧边栏logo样式 -->

        <div>
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#1a1827"
            text-color="#fff"
            active-text-color="#ffd04b"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
          >
            <div class="sidebar-logo-container">
              <!-- logo的img设置 -->
              <img
                v-show="!isCollapse"
                src="http://pinda.itheima.net/static/img/log.986a60ec.png"
                alt=""
              />
              <img
                v-show="isCollapse"
                class="mini-img"
                src="http://pinda.itheima.net/static/img/logo-mini.bf6339a4.png"
                alt=""
              />
            </div>
            <!--                                物流管理                     -->
            <el-submenu index="1">
              <template slot="title">
                <div class="first-title">
                  <i class="el-icon-location"></i>
                  <span slot="title">物流管理</span>
                </div>
              </template>
              <!--                     机构作业范围             -->
              <el-submenu index="1-1">
                <span slot="title" class="second-title">机构作业范围</span>
                <el-menu-item index="1-1-1">机构作业范围列表</el-menu-item>
              </el-submenu>
              <!--                     订单管理             -->
              <el-submenu index="1-2">
                <span slot="title" class="second-title">订单管理</span>
                <el-menu-item index="1-2-1">订单列表</el-menu-item>
              </el-submenu>
              <!--                     运单管理             -->
              <el-submenu index="1-3">
                <span slot="title" class="second-title">运单管理</span>
                <el-menu-item index="1-3-1">运单列表</el-menu-item>
              </el-submenu>
              <!--                     网点管理             -->
              <el-submenu index="1-4">
                <span slot="title" class="second-title">网点管理</span>
                <el-menu-item index="1-4-1">快递作业管理</el-menu-item>
                <el-menu-item index="1-4-2">快递员作业范围管理</el-menu-item>
                <el-menu-item index="1-4-3">货品类型</el-menu-item>
              </el-submenu>
              <!--                     转运中心             -->
              <el-submenu index="1-5">
                <span slot="title" class="second-title">转运中心</span>
                <el-menu-item index="1-5-1">车型管理</el-menu-item>
                <el-menu-item index="1-5-2">车队</el-menu-item>
                <el-menu-item index="1-5-3">车辆管理</el-menu-item>
                <el-menu-item index="1-5-4">司机管理</el-menu-item>
                <el-menu-item index="1-5-5">线路管理</el-menu-item>
                <el-menu-item index="1-5-6">线路类型管理</el-menu-item>
              </el-submenu>
              <!--                     运输管理             -->
              <el-submenu index="1-6">
                <span slot="title" class="second-title">运输管理</span>
                <el-menu-item index="1-6-1">运输任务管理</el-menu-item>
                <el-menu-item index="1-6-2">司机作业单管理</el-menu-item>
                <el-menu-item index="1-6-3">机构数据看板</el-menu-item>
              </el-submenu>
              <!--                     调度管理             -->
              <el-submenu index="1-6">
                <span slot="title" class="second-title">调度管理</span>
                <el-menu-item index="1-6-1">智能调度</el-menu-item>
                <el-menu-item index="1-6-2">调度信息</el-menu-item>
              </el-submenu>
            </el-submenu>
            <!--                                系统管理                     -->
            <el-submenu index="2">
              <template slot="title">
                <div class="first-title">
                  <i class="el-icon-location"></i>
                  <span slot="title">系统管理</span>
                </div>
              </template>
              <!--                     组织管理             -->
              <el-menu-item index="2-1">组织管理</el-menu-item>
              <!--                     岗位管理             -->
              <el-menu-item index="2-2">岗位管理</el-menu-item>
              <!--                     用户管理             -->
              <el-menu-item index="2-1">用户管理</el-menu-item>
              <!--                     菜单配置             -->
              <el-menu-item index="2-1">菜单配置</el-menu-item>
              <!--                     角色管理             -->
              <el-menu-item index="2-1">角色管理</el-menu-item>
              <!--                     文件管理             -->
              <el-menu-item index="2-1">文件管理</el-menu-item>
            </el-submenu>
            <!--                                监控管理                     -->
            <el-submenu index="3">
              <template slot="title">
                <div class="first-title">
                  <i class="el-icon-location"></i>
                  <span slot="title">系统管理</span>
                </div>
              </template>
              <!--                     组织管理             -->
              <el-menu-item index="3-1">操作日志</el-menu-item>
              <!--                     岗位管理             -->
              <el-menu-item index="3-2">登录日志</el-menu-item>
            </el-submenu>
          </el-menu>
        </div>
      </div>
      <el-container>
        <el-header class="navbar new-navbar">
          <div class="left" style="display: flex">
            <!-- 收缩功能 -->
            <div>
              <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                <el-radio-button v-show="isCollapse" :label="false">
                  <i class="el-icon-s-unfold"></i
                ></el-radio-button>
                <el-radio-button v-show="!isCollapse" :label="true">
                  <i class="el-icon-s-fold"></i
                ></el-radio-button>
              </el-radio-group>
            </div>
            <div class="Breadcrumb">
              <el-breadcrumb separator="/" class="Breadcrumb-item">
                <el-breadcrumb-item :to="{ path: '/' }"
                  >系统首页</el-breadcrumb-item
                >
                <el-breadcrumb-item
                  ><a href="/">活动管理</a></el-breadcrumb-item
                >
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div>
          <div class="user">
            <div>
              <img
                class="user-avatar"
                src="http://pinda.itheima.net/static/img/1d22f3e41d284f50b2c8fc32e0788698.e7137955.jpeg"
                alt=""
              />
            </div>
            <div>平台管理员</div>
          </div>
        </el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isCollapse: false
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-container {
  width: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 235px;
  min-height: 100vh;
}
.sidebar-container {
  .sidebar-logo-container {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-image: linear-gradient(90deg, #d92e2c, #f86e2b);
    text-align: center;
    img {
      width: 157px;
      height: 41px;
      display: inline-block;
      vertical-align: middle;
    }
    .mini-img {
      width: 56px;
      height: 31px;
    }
  }
}
.el-menu-vertical-demo {
  height: 100vh;
  background-color: #262335;
  -webkit-box-shadow: 2px 0 6px rgb(0 0 0 / 25%);
  box-shadow: 2px 0 6px rgb(0 0 0 / 25%);
}
::v-deep .first-title {
  font-size: 14px;
  font-weight: 500;
  color: rgb(255, 255, 255);
  i {
    color: rgb(255, 255, 255);
    margin: 10px;
  }
}
::v-deep .second-title {
  padding-left: 24px;
  font-size: 12px !important;
  color: #9a9a9a !important;
}
.second-title:hover {
  color: rgb(255, 255, 255) !important;
}
::v-deep .el-menu-item {
  font-size: 12px !important;
  padding-left: 76px !important;
  color: #9a9a9a !important;
}
.el-menu-item:hover {
  color: #ff7a63 !important;
}
.el-icon-s-fold {
  padding-top: 25px;
  font-size: 20px;
}
.el-icon-s-unfold {
  padding-top: 25px;

  font-size: 20px;
}
::v-deep .el-radio-button__inner {
  border: none;
  line-height: 60px;
  padding: 0 15px;
  float: left;
}
.navbar {
  display: flex;
  justify-content: space-between;
  padding-left: 0px !important;
  height: 60px;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
}
.user {
  display: flex;
  position: relative;
  height: 100%;
  line-height: 60px;
  font-size: 14px;
}
.user-avatar {
  margin-right: 10px;
  margin-top: 13px;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  vertical-align: text-bottom;
}
::v-deep .Breadcrumb {
  line-height: 60px;
  .Breadcrumb-item {
    line-height: 67px;
  }
}
</style>
